<template>
	<view class="margin-sm">
		<use-navbar title="写笔记"></use-navbar>

		<!-- 商品区 -->
		<view class="padding bg-main margin-bottom-sm border-radius dflex-b" @click="showGoods = true">
			<view class="dflex">
				<view class="iconfont iconshangpin-01 ft-base margin-right-xs"></view>
				<view class="fwb">商品</view>
			</view>

			<view class="dflex">
				<image v-if="postData.goods && postData.goods._id" class="margin-right-xs"
					style="width: 56rpx; height: 56rpx;" mode="widthFix" :src="postData.goods.img"></image>
				<view class="iconfont iconjiantou-01 fwb"></view>
			</view>
		</view>

		<!-- 标题 -->
		<view class="padding bg-main margin-bottom-sm border-radius dflex-b">
			<input type="text" maxlength="50" class="wh-full" v-model="postData.title" placeholder="标题(不超过50个字)" />
		</view>

		<view class="padding bg-main margin-bottom-sm border-radius">
			<textarea class="ft-black w-full fs-sm" v-model="postData.content" :maxlength="-1" placeholder="请输入正文"></textarea>

			<!-- 上传视频 -->
			<view class="margin-top-sm">
				<use-upload-video ref="udVideoObj" :compressed="false" @upload="uploadVideo"></use-upload-video>
			</view>

			<!-- 上传图片 -->
			<view class="margin-top-sm">
				<use-upload class="pos-r" :limit="6" @upload="uploadImgs"></use-upload>
			</view>

		</view>

		<!-- 提交操作 -->
		<view class="padding w-full margin-top">
			<view class="dflex-b border-radius-big">
				<view class="tac padding-tb-sm fwb flex1 bg-base" @click="toSubmit">发布</view>
			</view>
		</view>

		<use-popup v-model="showGoods" mode="bottom" bgclass=" ">
			<view class="padding-sm border-radius-top30" style="background-color: #f5f5f5;">
				<scroll-view scroll-y style="height: 80vh;">
					<use-goods-list title="笔记商品" @change="goodsChange"></use-goods-list>
				</scroll-view>
			</view>
		</use-popup>

		<!-- 用云版权 -->
		<use-copyright></use-copyright>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cid: '',
				isubimt: false,
				showGoods: false,
				// 商品数据
				goodsDatas: [],
				postData: {
					imgs: [],
					video: {},
					goods: {},
					title: '',
					content: '',
				}
			};
		},
		onLoad(options) {

			this.loadData();
		},
		methods: {
			async loadData() {
				let _this = this;

			},
			goodsChange(res) {
				console.log('goodsChange', res);
				this.showGoods = false;
				this.postData.goods = {
					_id: res._id,
					cid: res.cid,
					cids: res.cids,
					img: res.img,
					name: res.name,
					name_pw: res.name_pw,
					price: res.price,
					market_price: res.market_price,
					tags: res.tags
				};
				// 分类顶级ID
				this.cid = res.cids[0];
			},
			uploadImgs(options) {
				if (options.length > 0) this.postData.imgs = options;

				console.log('uploadImgs', this.postData.imgs);
			},
			uploadVideo(res) {
				console.log('uploadVideo', res);

				this.postData.video = res;
			},
			toSubmit() {
				if (!this.postData.title) {
					this.$api.msg('请填写标题');
					return;
				}
				if (!this.postData.content) {
					this.$api.msg('请填写正文');
					return;
				}
				console.log('this.postData', this.postData);
				if (this.isubimt) return;

				this.isubimt = true;
				uni.showModal({
					// title: '提示',
					content: '立即发布',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '发布中'
							})
							this.$func.usemall.call('shopping/addNote', this.postData)
								.then(res => {
									this.isubimt = false;
									uni.hideLoading();
									if (res.code === 200) {
										this.$api.msg('发布成功');
										uni.$emit('__shopping_add', {
											cid: this.cid
										});
										uni.navigateBack({});
										return;
									}

									if (typeof res.msg === 'object') {
										this.$api.msg(this.$api.getSecMessage(res.msg), 2300);
										return;
									}
									this.$api.msg(res.msg);
								})
							return;
						}

						this.isubimt = false;
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	/* 商品区 */
	.goods-area {
		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 180rpx;
			height: 180rpx;
		}
	}
</style>
